import React from 'react'

import AreaPicker from '@/components/Area/AreaPicker'

const Component = () =>
{
  //创建表单的对象结构
    const [form] = React.UI.Form.useForm()

    //初始化的个人资料数据
    let [business, SetBusiness] = useState({
        email: "@qq.com",
        vercode: '',
    })

    
    //表单提交方法
    const profile = async (values:any) => React.toast('验证成功', 'back')

  return (
    <>

      {/* 表单结构 */}
      <React.UI.Form
          name="profile"
          layout='horizontal'
          mode='card'
          form={form}
          initialValues={business}
          onFinish={profile}
          footer={<React.UI.Button block type='submit' color='primary' size='large'>提交验证</React.UI.Button>}
      >
          <React.UI.Form.Item name="email" label="邮箱" extra={<div><a>发送验证码</a></div>}>
              <React.UI.Input placeholder="请输入邮箱" readOnly />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="vercode" label="验证码" rules={[{ required: true }]}>
              <React.UI.Input placeholder="请输入验证码" />
          </React.UI.Form.Item>
      </React.UI.Form>
    </>
  )
}

export default Component